<template>
  <el-dialog
    class="customDialog"
    v-model="visible"
    :width="width"
    :title="title"
    :class="{proBg:title==='应急事件详情'}"
  >
    <div class="content" :style="{ height: height + 'px' }" style="--el-component-size-large: 40px">
      <component :is="component" :formData="formData" :typeString="typeString"></component>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import Mitt from "@/utils/mitt";
const AddProject = defineAsyncComponent(() => import("./AddProject.vue"));
const AddYuAn = defineAsyncComponent(() => import("./AddYuAn.vue"));
const AddSjlr = defineAsyncComponent(() => import("./AddSjlr.vue"));
const projectInfo = defineAsyncComponent(() => import("./ProjectInfo.vue"));
const openPro = defineAsyncComponent(() => import("./openPro.vue"));
const visible = ref(false);
const width = ref(500);
const title = ref("");
const height = ref(500);
const component = ref();
const formData = ref({});
const typeString= ref({})
onMounted(() => {
  Mitt.on('close-dialog', () => {
    visible.value = false
  })

  Mitt.on("js-addProject", () => {
    visible.value = true;
    width.value = 560;
    height.value = 600;
    title.value = "新增项目";
    component.value = AddProject;
  });
  Mitt.on("js-addYuAn", ({titleName,res}) => {
    visible.value = true;
    width.value = 560;
    height.value = 600;
    title.value = titleName
    component.value = AddYuAn;
    formData.value=res;
    typeString.value = titleName=='预案详情'?'info':''
  });
    Mitt.on("js-addSjlr", () => {
    visible.value = true;
    width.value = 650;
    height.value = 1000;
    title.value ="事件录入";
    component.value = AddSjlr;
  }); 
 Mitt.on("js-projectInfo", () => {
    visible.value = true;
    width.value = 1151;
    height.value = 1072;
    title.value = "应急事件详情";
    component.value = projectInfo;
  });  
 Mitt.on("js-openPro", () => {
    visible.value = true;
    width.value = 559;
    height.value = 300;
    title.value = "启动预案";
    component.value = openPro;
  }); 
});

onUnmounted(() => {
  Mitt.off("js-addProject");
  Mitt.off('close-dialog')
});
</script>

<style lang="less">
.customDialog {
  background: url("./image/dialog-bg.png") no-repeat center center !important;
  background-size: 100% 100% !important;
  color: #fff;
  .el-dialog__header {
    padding: 0 20px;
    margin: 0;
    .el-dialog__title {
      font-family: YouSheBiaoTiHei;
      font-weight: bold;
      font-size: 26px;
      color: #fff;
      line-height: 46px;
    }
    .el-dialog__headerbtn {
      width: 46px;
      height: 46px;
      top: 0;
    }
  }

  .el-form {
    color: #fff;
    .el-form-item__label{
      color: #fff;
    }
    .el-select {
      width: 100%;
    }
    .el-date-editor {
      width: 100%;
    }

    .el-input__wrapper {
      font-size: 20px;

      background: rgba(48,82,95,0.62) !important;
      box-shadow: 0 0 0 1px #4FB9CF inset !important;
    }
    .el-input__inner {
      color: #daf5fa !important;

      background: transparent !important;
    }
  }
}
.proBg{
  background: url("./image/dialog_bg_1.png") no-repeat center center !important; 
}
</style>
